<template>
    <div class="goods-list">
      <div class="goods-item" v-for="item in goodslist" :key="item.id">
        <a href="#">
            <router-link :to="{name: 'goods_info', params: {id: item.id}}">
          <img :src="item.image">
          <h1 class="title">{{ item.name }}</h1>
          <p class="info">
            <span class="price">¥{{ item.price }}</span>
            <span class="sell">剩余 {{ item.num }} 件</span>
          </p>
        </router-link>
        </a>
      </div>
      <mt-button class="more" v-if="goodslist.length !== 0" size="large" @click="getMore">加载更多</mt-button>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        goodslist: [],
        last_id: 0
      }
    },
    props: ['category_id'],
    created() {
      this.getGoodsList()
    },
    methods: {
      getGoodsList() {
        let params = {last_id: this.last_id, category_id: this.category_id } // 定义 params 变量
        this.$http.get('goodslist', { params }).then(res => {
          this.$indicator.close()
          if (res.data.code === 1) {
            if (res.data.data.length > 0) {
              this.goodslist = this.goodslist.concat(res.data.data)
              this.last_id = res.data.data[res.data.data.length - 1].id
    } else if (this.goodslist.length > 0) {
      this.$toast('已经到达底部')
            } else {
              this.$toast('列表为空')
            }
          }
        }, err => { // 添加错误处理
          console.error(err)
        }) // 添加逗号分隔符
      }
    },
    getMore () {
    this.getGoodsList()
  }
  }
  </script>
  
  <style lang="scss" scoped>
  .goods-list {
    display: flex;
    flex-wrap: wrap;
    padding-left: 10px;
    .more {
    margin: 15px 0;
    font-size: 14px;
  }
    .goods-item {
      width: calc(50% - 10px); /* 修正宽度计算 */
      margin: 10px 10px 0 0;
      background: #fff;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-radius: 10px;
      padding: 10px;
      img {
        width: 100%;
      }
      .title {
        font-size: 14px;
        color: #333;
        margin: 10px 0;
      }
      .info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0;
        .price {
          color: red;
          font-weight: bold;
          font-size: 16px;
        }
        .sell {
          font-size: 13px;
        }
      }
    }
  }
  </style>